<script setup lang="ts">
import { ref, onMounted } from 'vue';
import unfold from '@/assets/largescreen/mokuai-flag.png';
import Collapse from '@/assets/largescreen/mokuai-false.png';
import { Search } from '@element-plus/icons-vue';
import { useTopStore } from '@/store/modules/earlyWarning/useTopStore';
import { getAlarmData } from '@/api/deviceAlarms';
import { getAlarmTypeName } from '@/enums/AlarmTypeEnum';
import icon1 from '@/assets/largescreen/nongdubaojing-mokuai.png';
import icon2 from '@/assets/largescreen/FlowAlarm.png';
import icon3 from '@/assets/largescreen/famenzhuangtai.png';
import icon4 from '@/assets/largescreen/pohuaibaojing.png';

interface IAlarmListType {
  [key: string]: any;
}

const store = useTopStore();
const activeNames = ref('01');
const queryName = ref<string>('');
//切换展开收起图标
const ToggleIcon = (name: string) => {
  if (activeNames.value === name) {
    return unfold;
  } else {
    return Collapse;
  }
};
//告警列表
const alarmMapList = ref<IAlarmListType>({});
//切换模块
const ToggleModule = (val: string) => {};
//查询列表
const searchHandle = () => {
  getList();
};
//映射报警icon
const MapTitleIconHandle = (name: string) => {
  switch (name) {
    case '01':
      return icon1;
    case '02':
      return icon2;
    case '04':
      return icon3;
    case '05':
      return icon4;
  }
};
//获取列表
const getList = async () => {
  try {
    const { data } = await getAlarmData({
      searchContent: queryName.value
    });
    alarmMapList.value = data;
  } catch (error) {
    console.error(error, '查询列表失败');
  }
};
onMounted(() => {
  getList();
});
</script>

<template>
  <el-input v-model="queryName" placeholder="请输入关键词" :suffix-icon="Search" @change="searchHandle" />
  <el-collapse @change="ToggleModule" v-model="activeNames" accordion class="largeScreen-collapse">
    <el-collapse-item :name="index" v-for="(item, index) in alarmMapList" :key="index">
      <template #title>
        <img :src="MapTitleIconHandle(String(index))" alt="" />
        {{ getAlarmTypeName(index) }}
      </template>
      <template #icon>
        <div class="icon-box">
          <img :src="ToggleIcon(String(index))" alt="" />
        </div>
      </template>
      <el-scrollbar min:height="20" max-height="300">
        <div class="main-box">
          <template v-if="item?.length > 0">
            <div @click="store.addAlarmPoint(itm)" :title="itm.alarmAddr" class="main-item-box" v-for="itm in item" :key="itm.id">
              {{ itm.alarmAddr }}
            </div>
          </template>
          <div v-else class="Empty-box">暂无数据</div>
        </div>
      </el-scrollbar>
    </el-collapse-item>
  </el-collapse>
</template>

<style scoped lang="scss">
.largeScreen-collapse {
  :deep(.el-collapse-item__header) {
    background: rgba(49, 126, 255, 0.5);
    color: white;
    margin-top: 0.375rem;
    font-size: 1.125rem;
    padding: 0 0.9375rem;
    box-sizing: border-box;
  }

  :deep(.el-collapse-item__arrow) {
    width: 40px;
  }

  .icon-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: right;
  }

  img {
    margin-right: 0.625rem;
    width: 1.125rem;
    height: 1.125rem;
  }
}

.main-box {
  width: 100%;
  background-color: rgba($color: #063145, $alpha: 0.5);
  padding: 0.9375rem;
  box-sizing: border-box;

  .main-item-box {
    width: 100%;
    min-height: 1.875rem;
    background: rgba(14, 89, 214, 0.34);
    margin-top: 0.625rem;
    line-height: 1.875rem;
    box-sizing: border-box;
    font-size: 1.125rem;
    cursor: pointer;
    color: white;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .main-item-box::before {
    content: '';
    display: inline-block;
    width: 0.25rem;
    min-height: 1.875rem;
    background-color: #43ff8b;
    vertical-align: top;
    margin-right: 20px;
  }

  .Empty-box {
    font-weight: 700;
    font-size: 1.125rem;
    color: #0be4f1;
  }
}

:deep(.el-input__wrapper) {
  box-shadow: inset 0 0 0.625rem 0 #045bbd;
  background-color: #003895;
  border: 0.0625rem solid #045bbd;
  height: 2.1875rem;
  line-height: 2.1875rem;
  color: #fff;
}

:deep(.el-input__inner) {
  color: white;
}
</style>
